<table width=100%><tr>
 <td width=40% valign=top>
  <h1>&nbsp;Please submit your post</h1>

  <form method="post" action="" enctype="multipart/form-data"
              style="font-style:Verdana;font-size=14px;margin=10px">
   <table>
     <tr><td>Title</td><td><input size=47 name="title" value="<%=@params[:title]%>"/></td></tr>
     <tr><td>Link</td><td><input size=50 name="url" value="<%=@params[:url]%>"/></td></tr>
     <tr><td valign=top>Comments</td><td><textarea rows=5 cols=40 name="description"><%=@params[:description]%></textarea></td></tr>
     <tr><td>Tags</td><td><input size=50 name="tagstring" value="<%=@params[:tags]%>" /></td></tr>
     <tr><td>Location</td><td><input size=47 id="location" name="location" value="<%=@params[:location]%>" /></td></tr>

      <tr><td><A HREF="#"
                 onclick="cal1x.select(document.forms[0].begins,'anchor1x','yyyy-MM-dd');
		                               return false;"
                 title="cal1x.select(document.forms[0].begins,'anchor1x','yyyy-MM-dd');
                        return false;">Begins?</a>
	  </td><td>
      <input size=35 type="text" name="begins" id="begins" value="<%=params[:begins]%>" />
	  <a name="anchor1x" id="anchor1x"></a>
      </td></tr>

      <tr><td><A HREF="#"
                 onclick="cal1x.select(document.forms[0].ends,'anchor2x','yyyy-MM-dd');
		                  return false;"
		         title="cal1x.select(document.forms[0].ends,'anchor2x','yyyy-MM-dd');
		                return false;">Ends?</a>
      </td><td>
      <input size=35 type="text" name="ends" id="ends" value="<%=params[:ends]%>" />
      <a name="anchor2x" id="anchor2x"></a>
      </td></tr>

      <tr><td>Depiction?</td><td><input type="file" name="depiction" id="depiction" /></td></tr>

     <tr><td></td><td>
        <input type="hidden" id="latmin" name="latmin" value="0"/>
        <input type="hidden" id="lonmin" name="lonmin" value="0"/>
        <input type="hidden" id="latmax" name="latmax" value="0"/>
        <input type="hidden" id="lonmax" name="lonmax" value="0"/>
        <input type=submit value=submit />
     </td></tr>
   </table>
  </form>
 </td>
 <td width=50% valign=top align=left>
  <h1>&nbsp;&nbsp;Adjust map location for event</h1>
  <div id="map" style="margin:10px; width:90%; height:200px"></div>
  <script defer="defer" type="text/javascript">

  var markers;
  var marker;
  var map;
  var wms;
  var canvas;

  function paint_marker(lon,lat) {
    var artwork = "/appwiki/images/emblem-important.png";
    var lonlat = new OpenLayers.LonLat(lon,lat);
    var iconsz = new OpenLayers.Size(32,32); 
    var icon   = new OpenLayers.Icon(artwork,iconsz);
    if(marker) markers.removeMarker(marker);
    marker = new OpenLayers.Marker(lonlat,icon);
    markers.addMarker(marker);
  };

  function map_startup() {
      map = new OpenLayers.Map('map');
      wms = new OpenLayers.Layer.WMS( "OpenLayers WMS","http://labs.metacarta.com/wms-c/anselm.py", {layers: 'basic'} );
      map.addLayer(wms);
      markers = new OpenLayers.Layer.Markers("Some points of interest");
      map.addLayer(this.markers);
      map.setCenter( new OpenLayers.LonLat(0,0),2);
      map.events.register("moveend", null, function() {
         var center = map.getCenter();
         var zoom = map.getZoom();
         var bounds = map.getExtent();
         // xxx turns out bounds are not that useful; maybe get radius; modify db?
         document.getElementById("latmin").value = center.lat;
         document.getElementById("lonmin").value = center.lon;
         document.getElementById("latmax").value = center.lat;
         document.getElementById("lonmax").value = center.lon;
         document.getElementById("location").value = center.lat + " " + center.lon;
         paint_marker(center.lon,center.lat);
       } );
      paint_marker(0,0);
  }
  map_startup();
  </script>
 </td>
</table>

<script src="/javascripts/calendar.js"></script>
<DIV ID="testdiv1" STYLE="position:absolute;visibility:hidden;background-color:white;layer-background-color:white;"></DIV>
<DIV ID="testdiv2" STYLE="position:absolute;visibility:hidden;background-color:white;layer-background-color:white;"></DIV>
<script LANGUAGE="JavaScript" ID="jscal1x">
var cal1x = new CalendarPopup("testdiv1");
var cal2x = new CalendarPopup("testdiv2");
</script>
